<template>
    <div>
      <el-button type="primary" @click="openDialog">物资出库</el-button>
      <el-dialog :visible.sync="visible" title="出库" @close="closeDialog">
        <el-form :model="form" ref="form">
          <el-form-item
            label="设备名称"
            :rules="[{ required: true, message: '请输入设备名称', trigger: 'blur' }]">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item
            label="数量"
            :rules="[{ required: true, message: '请输入数量', type: 'number', trigger: 'blur' }]">
            <el-input v-model.number="form.quantity" type="number"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        visible: false,
        form: {
          name: '',
          quantity: 0
        }
      };
    },
    methods: {
      openDialog() {
        this.visible = true;
      },
      closeDialog() {
        this.visible = false;
      },
      onSubmit() {
        this.$refs.form.validate(valid => {
          if (valid) {
            // 模拟API调用进行出库
            this.$message({
              message: '出库成功',
              type: 'success'
            });
            this.$emit('refresh'); // 刷新库存数据
            this.closeDialog();
          } else {
            this.$message.error('请填写所有必填项');
          }
        });
      }
    }
  };
  </script>
  
  <style scoped>
  /* 样式 */
  </style>